<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="steps-body">
        <div class="steps-body-left" :style="{maxHeight: heightBox+'px'}">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              size="small"
              class="mb-20">
          </el-input>
          <!--          default-expand-all	是否默认展开所有节点-->
          <!--          props	配置选项，具体看下表-->
          <!--          label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—-->
          <!--          children	指定子树为节点对象的某个属性值	string	—	—-->
          <!--          disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	—	—-->
          <!--          isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效-->
          <el-tree
              class="filter-tree"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="custom-tree-list">
                    <i class="iconfont iconwenjianjia"></i>
                    <span class="tree-name">{{ node.label }}</span>
                  <span class="tree-number" v-if="!node.childNodes.length">文件总数<i>{{data.need_number?data.need_number:0}}</i>，已提交<i>{{data.file_number?data.file_number:0}}</i>，未提交<i>{{data.need_number?(data.file_number?data.need_number-data.file_number:data.need_number-0):0}}</i></span>
                    <span class="iconEdit" v-if="!node.childNodes.length">
                      <i class="el-icon-plus" @click.stop="addFileFn(node, data,'add')">新增</i>
                      <i class="el-icon-edit-outline" @click.stop="addFileFn(node, data,'edit')">编辑</i>
                      <i class="el-icon-delete" @click.stop="handleDetel(node, data)">删除</i>
                    </span>
                </span>
            </span>
          </el-tree>
        </div>
        <div class="steps-body-right">
          <div class="mb-20">
            <el-button size="small" @click="addFileFn('first')">新增目录文件夹</el-button>
          </div>
        </div>
      </div>
    </div>
    <addTree :visible.sync="treeVisible" :fileOption="fileOption" @getInit="initFn" :fileType="fileType"></addTree>
  </div>
</template>

<script>
import addTree from "./addTree";

export default {
  components: {
    addTree
  },
  data() {
    return {
      heightBox: 0,
      filterText: '',
      treeVisible: false,
      fileOption: '',
      fileType: '',
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  created() {
    let n = this;
    this.$nextTick(() => {
      n.heightBox = document.body.clientHeight - (60 + 50 + 60 + 70);
    })
    this.initFn()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    async initFn() {
      let data = await this.$fetch(this.api.task.file.index, {p: 0});
      if (!data.code) {
        // ===========star
        this.treeList = this.translateDataToTree(data.list)
        // =============end
      }
      console.log(data)
    },
    translateDataToTree(data) {
      let parents = data.filter(value => !value.parent_id)
      let children = data.filter(value => value.parent_id)
      console.log('循环的内容：', parents, children)
      let translator = (parents, children) => {
        parents.forEach((parent) => {
              children.forEach((current, index) => {
                    if (current.parent_id === parent.id) {
                      let temp = JSON.parse(JSON.stringify(children))
                      temp.splice(index, 1)
                      translator([current], temp)
                      typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                    }
                  }
              )
            }
        )
      }
      translator(parents, children)
      console.log('整合的数据内容：', parents, children)
      return parents
    },
    getJson(option){
      return JSON.parse(JSON.stringify(option))
    },
    addFileFn(node, data, type) {
      console.log('11', node, data)
      if (node !== 'first') {
        this.fileOption = data
        this.fileType =type
      } else {
        this.fileOption = ''
        this.fileType = ''
      }
      this.treeVisible = true
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleDetel(node, data) {
      console.log(node, data)
      this.$confirm(`确认永久删除${data.name}该文件夹, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(data.id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      this.$post(this.api.task.file.delete, {ids: id}).then((response) => {
        if (!response.code) {
          this.initFn()
          this.$message.success(response.msg)
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.steps-body {
  width: 90%;
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
}

.steps-body-left {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px;
}

.steps-body-right {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  align-items: center;
}

.tree-list {
  width: 50%;
  margin: 0 auto;
  padding: 20px 0;
}

.iconwenjianjia {
  color: #ff9d00;
}

.tree-name {
  color: #000;
  margin-right: 10px;
}

.tree-number {
  padding: 0 10px;
  margin-right: 30px;
}

.tree-number i {
  font-style: normal;
  color: #dc540f;
  font-weight: bold;
  padding: 0 3px;
}

.custom-tree-list .tree-number:hover, .iconEdit i:hover {
  color: #1b8de5;
  text-decoration: underline;
}

.custom-tree-list {
  //font-size: 16px;
}

.iconEdit i {
  margin-right: 20px;
}
</style>
